<template>
  <div class="nav">
    <div class="navbars" v-if="!cur" v-cloak>
      <i class="iconfont iconfanhui" @click="goBack" v-if="back"></i>
      <div class="title">{{title}}</div>
      <i class="iconfont active icondaohanglan" @click="showNav"></i>
    </div>

    <div class="mask" v-if="maskF" v-cloak>
      <div class="mask-content">
        <i class="iconfont iconicon-x" @click="maskF= false"></i>
        <div class="top">
          <img :src="avatar" alt />
          <div class="wrapper">
            <div class="btn btn1" @click.stop="goUser" v-if="api_token==''">登录/注册</div>
            <div class="btn" @click.stop="goCenter" v-if="api_token!=''">{{phone}}</div>
            <div class="layout" @click="layout" v-if="api_token!=''">退出登录</div>
          </div>
        </div>
        <ul>
          <li v-for="(item,index) in menus" :key="index" @click="go(item.path,index)">
            <img :src="require('.././img/nav/'+(index+1)+'.png')" alt class="icon" />
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "vNav",
  data() {
    return {
      api_token: localStorage.app_token ? localStorage.app_token : "",
      cur: false,
      title: "",
      maskF: false,
      back: true,
      l: localStorage.l ? localStorage.l : 1,
      lang: "",
      avatar: STATIC_WEB_URL + "/img/default_avatar.png",
      phone: "",
      exhibitionList: [],
      menus: [
        { name: "首页", path: "/", icon: "iconfont iconxuanzhongshangcheng" },
        {
          name: "精品展项",
          path: "/exhibit",
          icon: "iconfont iconhuizhang"
        },
        { name: "广场导览", path: "/guide", icon: "iconfont  icondaolantu" },
        {
          name: "企业简介",
          path: "/intro",
          icon: "iconfont  iconbianjijianjie"
        },
        {
          name: "在线预约",
          path: "/yue",
          icon: "iconfont  iconjingdianmenpiao"
        },
        {
          name: "新闻资讯",
          path: "/news",
          icon: "iconfont  iconxinwendongtai"
        },
        { name: "人才招聘", path: "/active", icon: "iconfont  iconsvg-fuben" },

        {
          name: "活动报名",
          path: "/activity",
          icon: "iconfont  iconbtn_atvityx"
        },
        { name: "交通指南", path: "/class", icon: "iconfont  icondaolantu" },
        { name: "志愿者管理", path: "/radio", icon: "iconfont  icondaolantu" },
        { name: "资源下载", path: "/center", icon: "iconfont  icondaolantu" },
        { name: "数字展厅", path: "/center", icon: "iconfont  icondaolantu" },
        { name: "招商合作", path: "/center", icon: "iconfont  icondaolantu" },
        { name: "党建工作", path: "/center", icon: "iconfont  icondaolantu" },
        { name: "个人中心", path: "/center", icon: "iconfont  icondaolantu" }
      ]
    };
  },

  mounted() {
    if (localStorage.app_token && localStorage.app_token != "") {
      this.getUser();
    }
    if (this.$route.query.api_token) {
      localStorage.app_token = this.$route.query.api_token;
    }
    this.title = this.$route.meta.title
      ? this.$route.meta.title
      : "金华文化广场";
  },
  methods: {
    goCenter() {
      this.maskF = false;
      this.$router.push("/center");
    },
    // 标题设置
    setTitle(title) {
      this.title = title;
    },
    getUser() {
      this.$api.getUser().then(res => {
        this.avatar = res.data.avatar;
        this.phone = res.data.phone;
      });
    },
    goUser() {
      // 如果api_token
      if (localStorage.app_token) {
        this.$router.push("/center");
        this.maskF = false;
        return false;
      } else {
        this.$router.push("/login");
        this.maskF = false;
      }
    },
    go(url, index) {
      this.maskF = false;
      window.scrollTo(0, 0);
      this.$router.push(url);
    },
    showNav() {
      this.maskF = !this.maskF;
    },
    goBack() {
      window.history.go(-1);
      window.scrollTo(0, 0);
    },
    layout() {
      let api_token = localStorage.app_token;
      localStorage.clear();
      this.maskF = false;
      Toast("退出成功");
      setTimeout(() => {
        this.$router.replace("/");
      }, 500);
      this.$api.layout(api_token).then(res => {});
      return false;
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav {
  border-bottom: 1px solid #e5e5e5;
  position: fixed;
  top: -1px;
  left: 0;
  width: 375px;
  margin: 0 auto;
  right: 0;
  z-index: 1200;
  background: linear-gradient(
    84deg,
    rgba(234, 179, 82, 1),
    rgba(255, 198, 98, 1),
    rgba(234, 179, 82, 1)
  );
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}

.navbar {
  font-size: 15px;
  color: #fff;
  padding: 0 11px;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: space-between;
  li {
    color: #777777;
    &.active {
      color: #000;
      font-size: 21px;
      position: relative;
      font-weight: 600;
      &:after {
        content: "";
        width: 100%;
        height: 4px;
        background: #b47c2d;
        border-radius: 3px;
        position: absolute;
        bottom: 4px;
        left: 0;
      }
    }
  }
}

.navbars {
  font-size: 18px;
  color: #fff;
  line-height: 60px;
  height: 60px;
  padding: 0 12px;
  overflow: hidden;
  text-align: center;
  display: flex;

  .title {
    flex: 1;
    padding-right: 18px;
  }
  i.active {
    color: #fff;
  }
}

.navbars {
  font-weight: 600;
  font-size: 20px;
  position: relative;
}

.navbars .iconfanhui {
  float: left;
}
i.denglu {
  width: 25px;
  /*px*/
  height: 20px;
  /*px*/
  display: inline-block;
  background: url(.././img/home/nav.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.navbars .iconx {
  float: right;
  width: 22px;
  display: inline-block;
  text-align: right;
}

.mask {
  position: fixed;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  max-width: 375px;
  color: rgba(255, 255, 255, 0.7);
  top: 0;
  .iconicon-x {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
    font-size: 20px;
  }
  .top {
    text-align: center;
    /*px*/
    img {
      width: 50px;
      height: 50px;
      border: 2px solid #fff;
      border-radius: 50%;
      display: inline-block;
      margin-top: 20px;
    }
    .wrapper {
      padding: 0px 20px 0;
    }
    .btn {
      color: rgba(255, 255, 255, 0.7);
      font-size: 18px;
      margin-bottom: 15px;
    }
    .btn1 {
      margin-top: 10px;
    }
    .layout {
      color: #b47c2d;
      font-size: 15px;
    }
  }
}

.mask .mask-content {
  height: 100%;
  width: 100%;
  right: 0;
  position: absolute;
  top: 0;
  background: linear-gradient(
    84deg,
    rgba(225, 170, 72, 1),
    rgba(230, 182, 98, 1)
  );
  display: flex;
  flex-direction: column;
}

.mask ul {
  flex: 1;
  padding: 20px 37px 40px;
  overflow: hidden;
}

.mask li {
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  width: 60px;
  height: 60px;
  float: left;
  text-align: center;
  margin-right: 55px;
  margin-bottom: 10px;
  .icon {
    display: block;
    margin: 5px auto;
    width: 25px;
    height: 25px;
    background-size: cover;
  }
  &:nth-child(3n) {
    margin-right: 0;
  }
}
</style>
